<template>
	<div class="addAlter">
		<Card class="card">
			<p slot="title" class="card-head">
				<span>应聘详情：{{msg.name}} {{msg.no}}</span>
			</p>
			<p class="card-body">
				<Row :gutter="16" class="steps">
					<Steps :current="current" :status="status">
						<Step title="待处理"></Step>
						<Step title="一面"></Step>
						<Step title="二面"></Step>
						<Step title="考核期"></Step>
						<Step title="正式入职"></Step>
					</Steps>
				</Row>
				<Row :gutter="16">
					<i-col span="5">
						<p class="htitle">处理申请：</p>
					</i-col>
					<i-col span="15">
						<i-form :model="formItem" :label-width="150" >
							<Form-item label="更新状态：" >
								<i-select v-model="formItem.state" @on-change="changestate">
									<i-option v-for="item in states" :value="item.value">{{ item.value }}</i-option>
								</i-select>
							</Form-item>
							<Form-item label="操作备注：" >
								 <Input @on-blur="changeannotation" v-model="formItem.annotation" type="textarea" :rows="8" placeholder="一面：；二面：；考核期：；"></Input>
							</Form-item>
							
						</i-form>
					</i-col>
				</Row>
				<Row :gutter="16">
					<i-col span="5">
						<p class="htitle">自我介绍：</p>
					</i-col>
					<i-col span="15">
						<p class="hintroduction">{{msg.introduction}}</p>
					</i-col>
				</Row>
			</p>
		</Card>
	</div>
</template>

<script>
export default {
	name: 'addAlter',
	data () {
		return {
			current:1,
			status:'process',
			formItem:{
				state:'',
				annotation:''
			},
			states: [
			{
				value: '待处理',
				label: 0
			},
			{
				value: '一面',
				label: 1
			},
			{
				value: '二面',
				label: 2
			},
			{
				value: '考核期',
				label: 3
			},
			{
				value: '正式入职',
				label: 4
			},
			{
				value: '回绝',
				label: 'error'
			},
			],
		}
	},
	props:['msg'],
	methods: {
		changestate(index){
			if(index=='回绝'){
				this.status='error'
			}else{
				this.status='process'
				for(let i of this.states){
					if(i.value==index){
						this.current=i.label
					}
				}
			}
			
		},
		getData(){
			for(let i of this.states){
				if (this.current==i.label) {
					this.formItem.state=i.value
				}
			}
		},
		changeannotation(){
			console.log(this.formItem.annotation)
		}
	},
	mounted:function () {
		this.getData()
	}
}
</script>

<style lang="css" scoped>
.addAlter{
	width: 100%;
	height: 100%
}
.addAlter .card{
	height: 100%;
	box-shadow: 0 1px 6px rgba(0,0,0,.2);
	border-color: #eee;
	position: relative;
}
.addAlter .card .ivu-card-body{
	overflow: auto;
	position: absolute;
	top: 57px;
	left: 0;
	right: 0;
	bottom: 0
}
.addAlter .card .card-head{
	height: 26px;
	line-height: 26px;
	font-size: 16px
}
.addAlter .card .card-body{
	padding-left: 50px;
	padding-right: 50px;
	height: 100%;
	padding-top: 20px;
	
}
.addAlter .steps{
	height: 120px;
	padding-top: 20px
}
.addAlter .htitle{
	text-align: right;
	font-size: 25px;
	font-family: 楷体
}
.addAlter .hintroduction{
	width: 100%;
	min-height: 120px;
	padding-bottom: 20px;
	font-size: 20px;
	line-height: 40px;
	font-family: 楷体;
	padding-left: 80px
}
</style>